<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>账户维护</title>
    <link rel="stylesheet" type="text/css" href="css/adminContent.css"/>
    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--contentPanel内容面板：1.search  2.space  3.content -->
<div id="contentPanel">
    <!--
        作者：1029243332@qq.com
        描述：条件查询
    -->
    <!-- 1.search -->
    <div class="search">
        <!-- 1.1. head -->
        <div class="head">
            <span><img src="img/search.ico"/> 查询条件</span>
            <span class="showHide">
				<img src="img/up.ico" class="up"/>
				<img src="img/down.ico" class="down" style="display: none;"/>
			</span>
        </div>
        <!-- 1.2. body -->
        <div class="body">
            <form name="form1">
                <table width="100%" cellspacing="0">
                    <tr>
                        <td>账号</td>
                        <td><input v-model="user.uid" placeholder="支持模糊查询"/></td>
                        <td>用户名</td>
                        <td><input v-model="user.uname" placeholder="支持模糊查询"/></td>
                    </tr>
                    <tr>
                        <td>手机号</td>
                        <td><input v-model="user.uphone" placeholder="支持模糊查询"/></td>
                        <td>邮箱</td>
                        <td><input v-model="user.uemail" placeholder="支持模糊查询"/></td>
                    </tr>
                    <tr>
                        <td colspan="6" id="btnPanel">
                            <input type="button" value="查询" @click="doList()"/>
                            <input type="button" value="清空" @click="doClear()"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <!-- 2.space -->
    <div class="space"></div>

    <!--
        描述：查询结果
    -->
    <!-- 3.content -->
    <div class="content">
        <!-- 3.1. head -->
        <div class="head">
            <span><img src="img/table.ico"/> 查询结果&nbsp;&nbsp;&nbsp;总用户人数:{{users.length}}</span>

            <span onclick="location.reload()" class="refresh"><img src="img/refresh.ico"/></span>
        </div>
        <!-- 3.2. body -->
        <div class="body">
            <table width="100%" cellspacing="0">
                <tr>
                    <th width="5%">序号</th>
                    <th width="10%">账号</th>
                    <th width="10%">用户名</th>
                    <th width="10%">头像</th>
                    <th width="10%">手机号</th>
                    <th width="10%">邮箱</th>
                    <th width="15%">操作</th>
                </tr>
                <tr v-for="(u,i) in users">
                    <td>{{i+1}}</td>
                    <td>{{u.uid}}</td>
                    <td>{{u.uname}}</td>
                    <td><img :src="u.uimage" style="width: 40px;height: 40px;border-radius: 20px"></td>
                    <td>{{u.uphone}}</td>
                    <td>{{u.uemail}}</td>
                    <td>
                        <a class="a1" type="button"  @click='doUpdate(u.uid)'>修改</a>
                        <a class="a2" type="button"  @click='doDelete(u.uid)'>删除</a>
                    </td>
                </tr>

                <tbody id="table1"></tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/showHide.js" type="text/javascript"></script>
<script>
    Vue.createApp({
        data(){
            return {
                user:{
                    uid:'',
                    uname:'',
                    uimage:'',
                    uphone:'',
                    uemail:''
                },
                users:{}
            }
        },
        methods:{
            doList(){
                axios({
                    method:"get",
                    url:'/person/getAllPerson',
                    params:this.user
                }).then(res => {
                    this.users = res.data;
                });
            },
            doUpdate(id){
                // 将 主键编号存放在 sessionStorage 中，在 userUpdate.html 页面中再取出
                sessionStorage.setItem("uid",id);
                location = "userUpdate.html";
            },
            doDelete(bh){
                axios({
                    method:"post",
                    url:'/person/delete',
                    params:{uid:bh}
                }).then(res => {
                    if(res.data == false){
                        layer.msg("删除失败！");
                    }else{
                        this.doList();
                    }
                });

                axios({
                    method:"post",
                    url:'/users/delete',
                    params:{uid:bh}
                }).then(res => {
                    if(res.data == false){
                        layer.msg("删除失败！");
                    }else{
                        this.doList();
                    }
                });
            },
            doClear(){
                this.user = {
                    uid:'',
                    uname:'',
                    uphone:'',
                    uemail:''
                }
            }
        },
        created(){
            this.doList();
        }
    }).mount("#contentPanel");
</script>
</html>
